<template>
  <el-descriptions class="pInfoCard-container" title="基本信息" :class="{'print-box': type === 'print'}">
    <template #extra v-if="type !== 'print'">
      <el-button type="primary" size="medium" :column="3" @click="edit">
        编辑
      </el-button>
    </template>
    <el-descriptions-item
      v-for="item in descriptionItems"
      :key="item.key"
      :label="item.label"
      :class-name="item.className"
      label-class-name="description-label"
    >
      {{ getItemValue(item) }}
    </el-descriptions-item>
  </el-descriptions>
  <familysView :pid="id" :type="type"></familysView>
  <add-patient
    ref="addRef"
    :isPatient="true"
    title="修改患者数据"
    @success="addSucess"
  ></add-patient>
</template>
<script>
  import { computed, reactive, ref } from 'vue'
  import { useStore } from 'vuex'
  import filter from '@/hooks/filter'
  import addPatient from '@/components/AddPatient'
  import familysView from './familysView.vue'
  export default {
    name: 'personInfoCard',
    props: {
      id: Number,
      type: {
        type: String,
        default: 'normal', // 使用类型 normal 正常 | print 打印
      }
    },
    components: { addPatient, familysView },
    setup(props) {
      const store = useStore()
      let form = computed(() => {
        return store.getters.patientInfo
      })
      // let isVisble = ref(false)
      const d = reactive({ addRef: null, id: props.id, type: 3 })
      const addRef = ref(null)
      const edit = function () {
        addRef.value.init({ id: props.id, type: 3 })
      }

      const loadPatientInfo = async function (id) {
        await store.dispatch('patient/loadPatientInfo', id)
      }
      const addSucess = function () {
        loadPatientInfo(props.id)
      }
      const baseDescriptionItems = [
        { key: 'name', label: '姓名：', field: 'name', className: 'descriptions-item' },
        { key: 'nation', label: '民族：', field: 'nation', className: 'descriptions-item' },
        { key: 'department', label: '科室：', field: 'departmentName', className: 'descriptions-item' },
        { key: 'sex', label: '性别：', field: 'sex', className: 'descriptions-item', formatter: (value) => value ? value === 1 ? '男' : '女' : '--' },
        { key: 'birthday', label: '生日：', field: 'birthday', className: 'descriptions-item' },
        { key: 'ptno', label: '病案号：', field: 'ptNo', className: 'descriptions-item' },
        { key: 'region', label: '住址：', field: 'regionName', className: 'descriptions-item' },
        { key: 'address', label: '详细地址：', field: 'address', className: 'descriptions-item' },
        { key: 'diagnosis', label: '诊疗卡号：', field: 'diagnosisNo', className: 'descriptions-item' },
        { key: 'age', label: '年龄：', field: 'ageName', className: 'descriptions-item' },
        { key: 'height', label: '身高：', field: 'height', className: 'descriptions-item', formatter: (value) => value ? value + 'cm' : '--' },
        { key: 'weight', label: '体重：', field: 'weight', className: 'descriptions-item', formatter: (value) => value ? value + 'kg' : '--' },
        { key: 'cardno', label: '身份证号：', field: 'cardNo', className: 'descriptions-item' },
        { key: 'allergic-drugs', label: '过敏药物：', field: 'allergicDrugs', className: 'descriptions-item' },
        { key: 'allergic-food', label: '过敏食物：', field: 'allergicFood', className: 'descriptions-item' },
        { key: 'email', label: '电子邮箱：', field: 'email', className: 'descriptions-item' },
        { key: 'phone', label: '电话号码：', field: 'phone', className: 'descriptions-item' },
        { key: 'outpatient', label: '门诊号：', field: 'outpatientNo', className: 'descriptions-item' },
        { key: 'registration', label: '登记号：', field: 'registrationNo', className: 'descriptions-item' },
        { key: 'doctor', label: '主治医生：', field: 'attendingDoctor', className: 'descriptions-item' },
      ]

      const descriptionItems = computed(() => {
        if (props.type === 'print') {
          // 打印模式下过滤掉病案号和电子邮箱
          return baseDescriptionItems.filter(item =>
            item.key !== 'ptno' && item.key !== 'email'
          )
        }
        return baseDescriptionItems
      })

      const getItemValue = (item) => {
        const value = form.value[item.field]
        if (item.formatter) {
          return item.formatter(value) || '--'
        }
        return value || '--'
      }

      return {
        form,
        addSucess,
        edit,
        d,
        addRef,
        descriptionItems,
        getItemValue,
      }
    },
  }
</script>
<style lang="scss" scoped>
  .pInfoCard-container {
    line-height: 12px;
    &.el-descriptions {
      font-size: 15px;
    }
  }
  .print-box {
    font-size: 18px;
    :deep(.el-descriptions__title) {
      font-size: 18px !important;
    }
    :deep(.el-descriptions__cell) {
      padding-bottom: 5px !important;
    }
    :deep(.descriptions-item) {
      font-size: 18px !important;
    }
    :deep(.description-label) {
      font-size: 18px !important;
    }
  }
</style>
